<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>

    <title>角色管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap-all.css">
    <script src="/js/bootstrap-all.js"></script>
    <!-- 系统CSS或JS -->
    <link rel="stylesheet" href="/css/system.css">

</head>
<style>

</style>
<script type="application/javascript">
    function addRole(){
        if(confirm("确认新增？")){
            $("#form-role").submit();
        }
    }

    function addRole1(){
        $.ajax({
            url:"/role/add",
            // dataType:"json",   //返回格式
            async:true,//请求是否异步，默认为异步
            data: $('#form-role').serialize(),
            type:"POST",   //请求方式
            beforeSend:function(){

            },
            success:function(mes){
                if (mes!=''&&mes!=null){
                    if (mes>0) {
                        $("#message-success").html("角色新增成功!");
                        $("#alertSuccess").removeClass("mytips-none");
                    }else{
                        $("#message-fail").html("角色新增出错！");
                        $("#alertFail").removeClass("mytips-none");
                    }
                }
            },
            complete:function(){
                window.location.href="role/role.html";
            },
            error:function(){
                //请求出错处理
            }
        });
    }

</script>
<body>

<div id="container">
    <div class='row'>
        <div class='col-3'>
            <h4>角色管理&nbsp;&nbsp;&nbsp;&nbsp;<small>新增角色</small></h4>
        </div>
    </div>
    <div class='bh2'></div>

    <div class='bg-content'>
        <form id="form-role" action="/role/add" method="post">
            <span>请输入参数：</span>
            <div class='bh2'></div>
            <div class='row'>
                <div class="col-sm-2">角色编码： <input name='menugrpcode' type='text'/></div>
                <div class="col-sm-2">角色名称： <input name='menugrpname' type='text'/></div>
                <div class="col-sm-2">角色描述： <input name='menugrpdescription' type='text'/></div>
            </div>

            <button  class="mybtn bg-primary" onclick="addRole()" type="button"  id="addrole" >确认新增</button>

        </form>

    </div>
    <!--隐藏，接收后台结果-->
    <input id="mes" th:value="${code}" hidden></input>

    <!--通用提示框-成功-->
    <div class='row  mytips mytips-none' id="alertSuccess"   >
        <div class="alert alert-success alert-dismissible fade show">
            <button type="button" onclick="window.location.href='../html/role/role.html'" class="close" data-dismiss="alert">&times;</button>
            <strong><span id="message-success" th:text="${message}"></span></strong>
        </div>
    </div>

    <!--通用提示框-失败-->
    <div class='row  mytips mytips-none' id="alertFail"   >
        <div class="alert alert-danger alert-dismissible fade show">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong><span id="message-fail" th:text="${message}"></span></strong>
        </div>
    </div>

    <script >

        /*************动态显示提示框**************************************/
        var mes=$("#mes").val();
        if (mes!=''&&mes!=null){
            if (mes>0) {

                $("#alertSuccess").removeClass("mytips-none");
            }else{

                $("#alertFail").removeClass("mytips-none");
            }
        }
        /******************************************************************/

    </script>
</div>
</body>
</html>